<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>

	<link href="../css/self/contextMenu.css" type="text/css" rel="stylesheet"/>
	<link href="../css/self/popupForm.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div class="container-fluid" id="serviceManager" style="height: calc(100% - 46px);">
	<div class="bg-light	">
		<div class="breadcrumb bg-light">
			<li class="breadcrumb-item">基础服务功能</li>
			<li class="breadcrumb-item"><a data-load-page="serviceList" href="#">服务集群管理</a></li>
			<li class="breadcrumb-item" id="service_name" >管理</li>
		</div>
	</div>
	<div class="sidebar-nav right" id="toolbox" draggable="false">
		<a href="#tidb-deploy" class="nav-header collapsed" data-toggle="collapse" draggable="false">Tidb部署</a>
		<div id="tidb-deploy" class="collapse show"><ul class="nav nav-list">
			<li>
				<div id="DB_PD" draggable="true">
					<img name="backGroundImg" src="../images/console/db_pd_icon.png" class="nodeStyle"/>
					<br><span>PD</span>
				</div>
			</li>
			<li>
				<div id="DB_TIKV" draggable="true">
					<img name="backGroundImg" src="../images/console/db_tikv_icon.png" class="nodeStyle"/>
					<br><span>TiKV</span>
				</div>
			</li>
			<li>
				<div id="DB_TIDB" draggable="true">
					<img name="backGroundImg" src="../images/console/db_tidb_icon.png" class="nodeStyle"/>
					<br><span>TiDB</span>
				</div>
			</li>
			<li>
				<div id="DB_COLLECTD" draggable="true">
					<img name="backGroundImg" src="../images/console/db_collectd_icon.png" class="nodeStyle"/>
					<br><span>collectd</span>
				</div>
			</li>
		</ul></div>

		<a href="#mq-deploy" class="nav-header collapsed" data-toggle="collapse">MQ部署</a>
		<div  id="mq-deploy" class="collapse"><ul class="nav  nav-list">
			<li>
				<div id="Switch" draggable="true">
					<img name="backGroundImg" src="../images/console/db_collectd_icon.png" class="nodeStyle"/>
					<br><span>Switch</span>
				</div>
			</li>
			<li>
				<div id="VBroker" draggable="true">
					<img name="backGroundImg" src="../images/console/db_collectd_icon.png" class="nodeStyle"/>
					<br><span>VBroker</span>
				</div>
			</li>
			<li>
				<div id="Broker" draggable="true">
					<img name="backGroundImg" src="../images/console/db_collectd_icon.png" class="nodeStyle"/>
					<br><span>Broker</span>
				</div>
			</li>
			<li>
			<div id="MQ_COLLECTD" draggable="true">
				<img name="backGroundImg" src="../images/console/db_collectd_icon.png" class="nodeStyle"/>
				<br><span>collectd</span>
			</div>
		</li>
		</ul></div>

		<a href="#cache-deploy" class="nav-header collapsed" data-toggle="collapse">Cache部署</a>
		<div id="cache-deploy" class="collapse"><ul class="nav nav-list ">
			<li>
				<div id="CACHE_PROXY" draggable="true">
					<img name="backGroundImg" src="../images/console/db_collectd_icon.png" class="nodeStyle"/>
					<br><span>cache proxy</span>
				</div>
			</li>
			<li>
				<div id="CACHE_NODE_CLUSTER" draggable="true">
					<img name="backGroundImg" src="../images/console/db_collectd_icon.png" class="nodeStyle"/>
					<br><span>cache cluster</span>
				</div>
			</li>
			<li>
				<div id="CACHE_NODE" draggable="true">
					<img name="backGroundImg" src="../images/console/db_collectd_icon.png" class="nodeStyle"/>
					<br><span>cache实例</span>
				</div>
			</li>
			<li>
				<div id="CACHE_COLLECTD" draggable="true">
					<img name="backGroundImg" src="../images/console/db_collectd_icon.png" class="nodeStyle"/>
					<br><span>collectd</span>
				</div>
			</li>
		</ul></div>
	</div>
	<canvas id="canvas" style="background: white;"></canvas>
</div>
	<!--<ul class="breadcrumb">
	    <li class="active">
    		<a href="javascript:toServiceList();">服务集群管理</a>
    		<span class="divider">/</span>
    	</li>
    	<li class="active" id="service_name"></li>
	</ul>-->
</body>


<!-- 改造过的jtopo -->
<script src="../js/jtopo-0.4.8/jtopo.01.element.js" type="text/javascript" ></script>
<script src="../js/jtopo-0.4.8/jtopo.02.util.js" type="text/javascript" ></script>
<script src="../js/jtopo-0.4.8/jtopo.03.stage.js" type="text/javascript" ></script>
<script src="../js/jtopo-0.4.8/jtopo.04.display.js" type="text/javascript" ></script>
<script src="../js/jtopo-0.4.8/jtopo.05.sence.js" type="text/javascript" ></script>
<script src="../js/jtopo-0.4.8/jtopo.06.node.js" type="text/javascript" ></script>
<script src="../js/jtopo-0.4.8/jtopo.07.link.js" type="text/javascript" ></script>
<script src="../js/jtopo-0.4.8/jtopo.08.container.js" type="text/javascript" ></script>
<script src="../js/jtopo-0.4.8/jtopo.09.layout.js" type="text/javascript" ></script>
<script src="../js/jtopo-0.4.8/jtopo.10.chart.js" type="text/javascript" ></script>
<script src="../js/jtopo-0.4.8/jtopo.11.animate.js" type="text/javascript" ></script>
<script src="../js/jtopo-0.4.8/jtopo.12.search.js" type="text/javascript" ></script>
<script src="../js/jtopo-0.4.8/jtopo.13.logo.js" type="text/javascript" ></script>

<!-- 自己封装的面板 -->
<script src="../js/self/component.flexibleContainer.js" type="text/javascript" ></script>
<script src="../js/self/component.statusNode.js" type="text/javascript" ></script>
<script src="../js/self/component.abstractPlate.js" type="text/javascript" ></script>
<script src="../js/self/component.TidbPlate.js" type="text/javascript" ></script>
<script src="../js/self/component.MQPlate.js" type="text/javascript" ></script>
<script src="../js/self/component.CachePlate.js" type="text/javascript" ></script>
<script src="../js/self/component.alert.js" type="text/javascript" ></script>
<script src="../js/self/contextMenu.js" type="text/javascript" ></script>
<script src="../js/self/popupForm.js" type="text/javascript" ></script>

<script src="../js/serviceManage.js" type="text/javascript" ></script>

<script type="text/javascript">
	$(".breadcrumb>li>a").off("click").on("click",function(){
		var $this = $(this), pageName = $this.data("load-page"),$main = $("#mainContent");
		if(pageName != ""){
			/*$main.load("pages/"+pageName+".html");*/
			$(".contextMenu").remove();
			$main.load(pageName+".html",function(){
				initPage();
			});
		}
	});
	//toolbox drag
	/*var $serviceManager = $("#serviceManager"),
			x = $serviceManager.outerWidth(),
			y = $serviceManager.outerHeight();
	var max={
		x : x,
		y: y
	}
	Util.drag(
			document.getElementById("toolbox"),
			false,
			function(x,type){return Math.max(0,Math.min(max[type],x))}
	)*/
</script>
</html>
